<template>

  <div style="width: 100%; height: 100%; background-color: white;">

  <div style="width: 98%; height: 100%; background-color:white;">
    <div style="width:96%; height: 95%; background-color:  white;">
      <el-row style="margin-top: 10px; border: 1px solid red;">
        <h4 style="float: left; font-size: 20px;">订单编号:</h4><h4 style="float: left; font-size: 20px; margin-top: 2px;">1568</h4>
    <div style="margin-top: 40px; margin-left: 20px;">
      <el-descriptions>
    <el-descriptions-item label="学员姓名">{{ this.orderdetail.studentname }}</el-descriptions-item>
    <el-descriptions-item label="交易时间">{{ this.orderdetail.time }}</el-descriptions-item>
    <el-descriptions-item label="报名备注">{{ this.orderdetails.remark }}</el-descriptions-item>
    <el-descriptions-item label="联系电话">{{ this.orderdetails.phone }}</el-descriptions-item>
    <el-descriptions-item label="打印备注">{{ this.orderdetails.remarks }}</el-descriptions-item>
    <el-descriptions-item label="包河校区">{{ this.orderdetails.school }}</el-descriptions-item>
    <el-descriptions-item label="录入类型">后台录入</el-descriptions-item>
    <el-descriptions-item label="经办人">{{ this.orderdetails.master }}</el-descriptions-item>
    <el-descriptions-item label="交易状态">{{ this.orderdetail.ordernewstatus }}</el-descriptions-item>
      </el-descriptions>
    </div>
      </el-row>
      <div v-if="bind()">
      <el-row style="margin-top: 10px;">
        <el-col :span="24" style="background-color: gainsboro; height: 50px;">
          <label style="float: left;  font-size: 20px; margin-top: 10px;">退费信息</label>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <template>
                <el-table
                    :data="orderback"
                    border
                    stripe
                    style="width: 100%"
                    tooltip-effect="dark"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                            prop="money"
                            label="退费金额"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="backtime"
                            label="退还课时"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="counttime"
                            label="退费时间"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="remark"
                            label="退费原因"
                            align="center">
                    </el-table-column>
                </el-table>
            </template>
        </el-col>
      </el-row>
    </div>
      <div v-if="three()">
      <el-row style="margin-top: 10px;">
        <el-col :span="24" style="background-color: gainsboro; height: 50px;">
          <label style="float: left;  font-size: 20px; margin-top: 10px;">购买内容</label>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <template>
                <el-table
                    :data="orderlist"
                    border
                    stripe
                    style="width: 100%"
                    tooltip-effect="dark"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                            prop="course"
                            label="课程名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                    width="70px"
                            prop="teacher"
                            label="老师"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="buycount"
                            label="购买课时"
                            align="center">
                    </el-table-column>
                    <el-table-column
                    width="100px"
                            prop="learn"
                            label="报名前已上"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            width="60px"
                            prop="price"
                            label="单价"
                            align="center">
                    </el-table-column>
                    <el-table-column
                    width="60px"
                            prop="getmoney"
                            label="金额"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            width="60px"
                            prop="preferential"
                            label="优惠"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            width="80px"
                            prop="getmoney"
                            label="签单金额"
                            align="center">
                    </el-table-column>
                    <el-table-column
                    width="60px"
                            prop="payment"
                            label="实收"
                            align="center">
                    </el-table-column>
                    <el-table-column
                    width="50px"
                            prop="lastpayment"
                            label="尾款"
                            align="center">
                    </el-table-column>
                    <el-table-column
                    width="140px"
                            prop="time"
                            label="购买时间"
                            align="center">
                    </el-table-column>
                    <el-table-column
                    width="130px"
                            prop="limits"
                            label="请假次数限制"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            width="80px"
                            label="操作"
                            >
                        <template slot-scope="scope">
                          <el-button type="warning" size="mini" v-if="ifback(scope.row.backid)" @click="backmoney(scope)">退费</el-button>
                            <el-button type="warning" size="mini" v-if="ifbacks(scope.row.backid)" @click="getmoney(scope)">补交</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-col>
      </el-row>
    </div>
    <div v-if="one()">
      <el-row style="margin-top: 10px;">
        <el-col :span="24" style="background-color: gainsboro; height: 50px;">
          <label style="float: left;  font-size: 20px; margin-top: 10px;">购买内容</label>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <template>
                <el-table
                    :data="orderlist"
                    border
                    stripe
                    style="width: 100%"
                    tooltip-effect="dark"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                            prop="course"
                            label="课程名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                    width="70px"
                            prop="teacher"
                            label="老师"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="buycount"
                            label="购买课时"
                            align="center">
                    </el-table-column>
                    <el-table-column
                    width="100px"
                            prop="learn"
                            label="报名前已上"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            width="60px"
                            prop="price"
                            label="单价"
                            align="center">
                    </el-table-column>
                    <el-table-column
                    width="60px"
                            prop="getmoney"
                            label="金额"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            width="60px"
                            prop="preferential"
                            label="优惠"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            width="80px"
                            prop="getmoney"
                            label="签单金额"
                            align="center">
                    </el-table-column>
                    <el-table-column
                    width="60px"
                            prop="payment"
                            label="实收"
                            align="center">
                    </el-table-column>
                    <el-table-column
                    width="50px"
                            prop="lastpayment"
                            label="尾款"
                            align="center">
                    </el-table-column>
                    <el-table-column
                    width="140px"
                            prop="time"
                            label="购买时间"
                            align="center">
                    </el-table-column>
                    <el-table-column
                    width="130px"
                            prop="limits"
                            label="请假次数限制"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            width="80px"
                            label="操作"
                            >
                        <template slot-scope="scope">
                          <el-button type="warning" size="mini" v-if="ifback(scope.row.backid)" @click="backmoney(scope)">退费</el-button>
                            <el-button type="warning" size="mini" v-if="ifbacks(scope.row.backid)" @click="getmoney(scope)">补交</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-col>
      </el-row>
    </div>
    <div v-if="tow()">
      <el-row style="margin-top: 10px;">
        <el-col :span="24" style="background-color: gainsboro; height: 50px;">
          <label style="float: left;  font-size: 20px; margin-top: 10px;">购买内容</label>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <template>
                <el-table
                    :data="orderlist"
                    border
                    stripe
                    style="width: 100%"
                    tooltip-effect="dark"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                            prop="course"
                            label="课程名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                    width="70px"
                            prop="teacher"
                            label="老师"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="buycount"
                            label="购买课时"
                            align="center">
                    </el-table-column>
                    <el-table-column
                    width="100px"
                            prop="learn"
                            label="报名前已上"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            width="60px"
                            prop="price"
                            label="单价"
                            align="center">
                    </el-table-column>
                    <el-table-column
                    width="60px"
                            prop="getmoney"
                            label="金额"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            width="60px"
                            prop="preferential"
                            label="优惠"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            width="80px"
                            prop="getmoney"
                            label="签单金额"
                            align="center">
                    </el-table-column>
                    <el-table-column
                    width="60px"
                            prop="payment"
                            label="实收"
                            align="center">
                    </el-table-column>
                    <el-table-column
                    width="50px"
                            prop="lastpayment"
                            label="尾款"
                            align="center">
                    </el-table-column>
                    <el-table-column
                    width="140px"
                            prop="time"
                            label="购买时间"
                            align="center">
                    </el-table-column>
                    <el-table-column
                    width="130px"
                            prop="limits"
                            label="请假次数限制"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            width="80px"
                            label="操作"
                            >
                        <template slot-scope="scope">
                          <el-button type="warning" size="mini" v-if="ifback(scope.row.backid)" @click="backmoney(scope)">退费</el-button>
                            <el-button type="warning" size="mini" v-if="ifbacks(scope.row.backid)" @click="getmoney(scope)">补交</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-col>
      </el-row>
    </div>
      <el-row style="margin-top: 20px;">
        <el-col :span="24" style="background-color: gainsboro; height: 50px;">
          <label style="float: left;  font-size: 20px; margin-top: 10px;">收支流水记录</label>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <template>
                <el-table
                    :data="orderwater"
                    border
                    stripe
                    style="width: 100%"
                    tooltip-effect="dark"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                            prop="name"
                            label="姓名"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="money"
                            label="收入金额"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="watertype"
                            label="流水类型"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="paytype"
                            label="支付方式"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="time"
                            label="交易时间"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="remark"
                            label="备注"
                            align="center">
                  </el-table-column>
                </el-table>
            </template>
        </el-col>
      </el-row>
    </div>
    </div>
    <el-dialog
            title="退费"
            :visible.sync="dialogVisibles"
            width="35%"
            :before-close="handleClose">
        <el-form :model="orderdetail" ref="feeStarand" label-width="100px" class="demo-feeStarand" style="margin-top: -50px;">
            <el-form-item label="实际支付金额:" prop="name">
                <label size="small" style="color: red; margin-right: 320px;">{{ this.orderdetail.getmoney }}.00元</label>
            </el-form-item>
            <el-form-item label="剩余课时:" prop="name">
                <label size="small" style="color: red; margin-right: 320px;">{{ this.times }}次</label>
            </el-form-item>
            <el-form-item label="退费金额" prop="idcard">
              <label size="small" style="color: red; margin-right: 320px;">{{ this.times * 100 }}元</label>
            </el-form-item>
            <el-form-item label="退还课时" prop="idcard">
              <label size="small" style="color: red; margin-right: 320px;">{{ this.times }}次</label>
            </el-form-item>
            <el-form-item label="退费原因" prop="idcard">
                <el-input v-model="remark" size="small"></el-input>
            </el-form-item>
            <el-form-item label="支付方式:" prop="cellphone">
              <el-select size="mini" v-model="value2" @change="findByOrderMoneyType()" placeholder="请选择" style="margin-left: -178px;">
      <el-option v-for="item in option1s"
      :key="item.value2"
      :label="item.label"
      :value="item.value2"></el-option></el-select>
            </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibles = false">取 消</el-button>
    <el-button type="primary" @click="update1()">确 定</el-button>
        </span>
    </el-dialog>
    <el-dialog
            title="补交尾款"
            :visible.sync="dialogVisible"
            width="35%"
            :before-close="handleClose">
        <el-form :model="orderdetail" ref="feeStarand" label-width="100px" class="demo-feeStarand">
            <el-form-item label="补交金额" prop="idcard">
                <el-input v-model="money" size="small"></el-input>
            </el-form-item>
            <el-form-item label="尾款总额:" prop="name">
                <label size="small" style="color: red; margin-right: 320px;">{{ this.orderdetail.lastpayment }}元</label>
            </el-form-item>
            <el-form-item label="支付方式:" prop="cellphone">
              <el-select size="mini" v-model="value2" @change="findByOrderMoneyType()" placeholder="请选择" style="margin-left: -178px;">
      <el-option v-for="item in option1s"
      :key="item.value2"
      :label="item.label"
      :value="item.value2"></el-option></el-select>
            </el-form-item>
            <el-form-item label="备注:">
                <el-input v-model="remark" size="small"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="orderupdate()">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
  export default{
    data(){
      return{
        scope:"",
        dialogVisible:false,
        dialogVisibles:false,
        count: 1,
        orderdetail:this.$route.params.orderdetail,
        orderdetails:"",
        orderwater:"",
        orderback:"",
        orderlist:"",
        value2:'',
        remark:"",
        money:"",
        option1s: [{
          value2: '支付宝',
          label: '支付宝'
        }, {
          value2: '微信',
          label: '微信'
        }, {
          value2: '现金',
          label: '现金'
        }],
      }

    },
  methods: {
    backmoney(){

      this.$axios.get("/orders/findByTimes/"+this.orderlist[0].userid).then(res=>{
        if(res.data.code == 200){
          this.times = 10 - res.data.data
          this.dialogVisibles = true
        }
      })
    },
    update1(){
      let data = {
        orderstatus:this.orderdetail.orderstatus,
        course:this.orderdetail.course,
        money : this.times * 100,
        backtime:this.times,
        paytype : this.value2,
        userid: this.orderdetail.userid,
        watertype:"退款",
        name: this.orderdetail.studentname,
        remark:this.remark
      }
      this.$axios.post("/orders/update1",data).then(res => {
      if(res.data.code == 200){
        this.$message.success("退款成功")
        this.money = ""
        this.remark = ""
        this.dialogVisibles = false
        this.findByOrder()
        this.findByOrderBack()
        this.orderdetail.backid = 0
      }
      this.findByOrdersWater()
    })
    },
    getmoney(scope){
      this.scope = scope
      this.dialogVisible = true
    },
    orderupdate(){
      let data = {
        orderstatus:this.orderdetail.orderstatus,
        course:this.orderdetail.course,
        money : this.money,
        paytype : this.value2,
        userid: this.orderdetail.userid,
        watertype:"补齐尾款",
        name: this.orderdetail.studentname,
        remark:this.remark
      }
      this.$axios.post("/orders/orderupdate",data).then(res => {
      if(res.data.code == 200){
        this.$message.success("补交成功")
        this.orderdetail.lastpayment = res.data.data[0].lastpayment
        this.money = ""
        this.remark = ""
        this.orderlist = res.data.data
        this.dialogVisible = false
      }
      this.findByOrdersWater()
    })
    },
    ifback(backid){
      if(backid == 1){
        return true
      }else{
        return false
      }
    },
    ifbacks(backid){
      if(backid == 2){
        return true
      }else{
        return false
      }
    },
    bind(){
      if(this.orderdetail.backid == 0){
        return true
      }else{
        return false
      }
    },
    one(){
      if(this.orderdetail.orderstatus == 0){
        return true
      }else{
        return false
      }
    },
    tow(){
      if(this.orderdetail.orderstatus == 1){
        return true
      }else{
        return false
      }
    },
    three(){
      if(this.orderdetail.orderstatus == 2){
        return true
      }else{
        return false
      }
    },
    findByOrdersWater(){
      this.$axios.get("/orders/findByOrdersWater/"+this.orderdetail.userid).then(res => {
      this.orderwater = res.data.data
    })
    },
    findByOrder(){
      this.$axios.get("/orders/findByOrder/"+this.orderdetail.id).then(res => {
      this.orderlist = res.data.data
    })
    },
    findByOrderBack(){
      this.$axios.get("/orders/findByOrderBack/"+this.orderdetail.userid).then(res => {
      this.orderback = res.data.data
    })
    }
  },
  mounted() {
    this.findByOrder()
    this.$axios.get("/orders/findByOrdersDetail/"+this.orderdetail.userid).then(res => {
      this.orderdetails = res.data.data[0]
      console.log(this.orderdetails)
    })
    this.findByOrdersWater()
    this.findByOrderBack()

  }
}
</script>

<style scoped>
</style>
